<template>
  <transition name="slide-fade">
    <div class="content" v-if="!isDelete">
      <div class="hd">
        <span class="title">{{info.title}}</span>
        <span class="status">{{statusEnu[info.status]}}</span>
      </div>
      <div class="bd">
        <div class="desc">{{info.desc}}</div>
        <div class="create-time">创建时间：{{info.createTime}}</div>
      </div>
      <div class="ft">
        <span class="btn" @click="updateHandle({ status : info.status === 0 ? 1 : 0})">{{ info.status === 0 ? '启用':'禁用'
        }}</span>
        <span class="btn" @click="updateHandle({ status : 'isDelete'})">删除</span>
        <span class="btn" @click="detailHandle">详情</span>
      </div>
    </div>
  </transition>
</template>
<script>
import {
  updateFormItemStatus
} from "@/api/flow";
export default {
  props: {
    info: Object
  },
  data() {
    return {
      statusEnu: {
        0: '未开启',
        1: '已开启'
      },
      isDelete: false
    }
  },
  methods: {
    async updateHandle(e) {
      const status = {
        0: {
          message: '禁用后用户将无法打开表单， 确认禁用？',
        },
        1: {
          message: '确认启用该表单吗？',
        },
        isDelete: {
          message: '删除后数据不可恢复，是否确定继续删除？',
          params: { isDelete: 1 }
        }
      }
      await this.$dialog.confirm({
        title: '提示',
        confirmButtonColor: '#ffb72f',
        ...status[e.status]
      }).then(async () => {
        const params = status[e.status].params ? status[e.status].params : e
        const data = { id: this.info.id, ...params }
        await this.updateRequest(data)
      }).catch(err => {
        console.log(err);
      })
    },
    async updateRequest(e) {
      const result = await updateFormItemStatus(e)
      const { data } = result
      if (data.code === 0) {
        this.info.status = data.data.status
        if (e.isDelete) {
          this.isDelete = true
        }
        this.$toast('操作成功')
      } else {
        this.$toast(data.msg)
      }
    },
    detailHandle() {
      location.href = `${process.env.VUE_APP_PREVIEW_URL}?pageId=${this.info.id}&isBack=1&isShare=1&isPreview=${true}`
    }
  }
}
</script>
<style lang="less" scoped>
* {
  font-family: PingFang SC;
}

.content {
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
  padding: 40px 33px;
  box-sizing: border-box;
  transform: display;

  .hd {
    display: flex;
    justify-content: space-between;

    .title {
      font-size: 32px;
      font-weight: bold;
      color: #131313;
    }

    .status {
      font-size: 28px;
    }
  }

  .bd {
    font-size: 26px;
    .desc {
      margin-top: 29px;
      color: #5f5f5f;
    }

    .create-time {
      margin-top: 39px;
      color: #5f5f5f;
    }
  }

  .ft {
    margin-top: 39px;
    display: flex;
    justify-content: space-between;

    .btn {
      box-sizing: border-box;
      width: 180px;
      height: 56px;
      border: 1px solid;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 28px;
      font-size: 28px;

      &:nth-child(1) {
        color: #6A9CD5;
      }

      &:nth-child(2) {
        color: #FFB72F;
      }

      &:nth-child(3) {
        background-color: #FFB72F;
        color: #fff;
        border-color: #FFB72F;
      }
    }
  }
}

.slide-fade-enter-active {
  transition: all .3s ease;
}

.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}
</style>
